@use "everything" as *;

@include styles;
@include code-styles;

// See the next.config.mjs to see how the `$env` gets defined
$is_production: $env == production;

@layer theme {
  :root {
    @if $color-scheme == system and not $disable-default-system-theme {
      @media (prefers-color-scheme: dark) {
        @include dark-theme(false);
      }
    }

    --toc-width: 18rem;
    --code-inline-font-family: var(--source-code-pro);
    @if $color-scheme != dark {
      @include light-theme(false);
    } @else {
      @include dark-theme(false);
    }

    @if $disable-default-root-theme {
      @include variables;
      @include code-variables;

      @if $color-scheme ==
        system and
        $disable-default-system-theme and
        $is_production
      {
        @media (prefers-color-scheme: dark) {
          @include dark-theme(true);
        }
      }
    }
  }
}

html {
  scroll-behavior: smooth;
}

.rmd-layout-main :where([id]) {
  scroll-margin-top: calc(0.5rem + layout-get-var(header-height));
}

// global utility classes
@include phone-media {
  .display-none-phone {
    display: none !important;
  }
}
